<script setup>
// 组件引入
import HeaderCpn from '@/components/main/header/headerCpn.vue'
import TableCpn from '@/components/main/dormitory/system-manger/tableCpn.vue'
import AddCpn from '@/components/main/dormitory/system-manger/addCpn.vue'
import eventBus from '@/utils/eventBus'
import DormitoryLeader from '@/components/main/dormitory/system-manger/dormitory-leader.vue'

// 功能函数
import { useDormitoryStore } from '@/store/super-manger/dormitory'
import { onMounted, computed } from 'vue';
import { storeToRefs } from 'pinia';

const dormitoryStore = useDormitoryStore();
const { isShowDormitoryPanel, panelTitle, buildings } = storeToRefs(dormitoryStore);

// 页面加载完成后，发送网络请求获取所有的宿舍信息
onMounted(() => {
  dormitoryStore.getAllDormitory(); // 获取所有的宿舍信息
  dormitoryStore.getAllBuilding();  // 获取所有的楼栋编号
});

eventBus.on('addBtnClick', function() {
  isShowDormitoryPanel.value = true;
  panelTitle.value = '新增'
})

// 将获取到的宿舍楼信息处理
const buildingsData = computed(() => {
  const handledData = [];
  for (let item of buildings.value) {
    const obj = { 
      title: `${item.building_name} 号楼`, 
      value: item.building_name, 
      text: '请输入宿舍号' 
    };
    handledData.push(obj);
  }
  return handledData;
})

// 搜索功能
eventBus.on('searchBtnClick', function(obj) {
  // 发送网络请求
  dormitoryStore.searchDormitory(obj.key, obj.value);
})

// 如果搜索框的内容被清空
eventBus.on('clearSearchBox', function() {
  // 发送网络请求
  dormitoryStore.getAllDormitory();
})
</script>

<template>
  <div class="dormitory main_content">
    <!-- 头部 -->
    <header-cpn :elOptions="buildingsData"/>
    <!-- 数据表展示 -->
    <table-cpn />
    <!-- 添加面板 -->
    <add-cpn />
    <!-- 设置寝室长 -->
    <dormitory-leader />
  </div>
</template>

<style scoped>

</style>